<template>
  <div id="chart" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '../../components/Charts/mixins/resize'
import loadApi from '@/api/img';
export default {
  name: 'cityShow',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '1000%'
    }
  },
  data(){
    return {

    }
  },
  mounted() {
    this.setChart()
  },
  methods:{
    async setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('chart'))
      var data=[
        {
          value:'',
          name:''
        },
      ]


      let res = await loadApi.listAll()
      for (var i=0;i<res.data.length;i++) {
        // console.log(res.data.length)
        data.push({value: '',name: ''})
        data[i].value = res.data[i].quantities
        data[i].name = res.data[i].entryname+res.data[i].projectname
        // console.log(data[0].value)
        // shuju.name.push(res.data[i].quantities)
        // console.log(shuju)
      }

      // 指定图表的配置项和数据
       var option ={
         backgroundColor: '#fdfdfd',
           title: {
             text: '饼状图',
             subtext: '数据分布',
             left: 'center'
           },
           tooltip: {
             trigger: 'item'
           },
           legend: {
             orient: 'vertical',
             left: 'left'
           },
           series: [
             {
               name: 'Access From',
               type: 'pie',
               radius: '50%',
               data: data,
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }
           ]
         };
          this.chart.setOption(option)
       }
  },
}
</script>

<style scoped>

</style>
